<template>
  <!-- 编辑随访 -->
  <section>
    <div style="border-bottom:1px solid #eee;padding-bottom:10px;">
      <el-page-header @back="goBack" content="随访任务详细"></el-page-header>
    </div>
    <br />
    <div class="form-tool">
      <div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="top"
          @submit.native.prevent="onSubmit"
        >
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="患者：" prop="patientId">
                <patientSearch
                  v-model="form.patientId"
                  :disabled="!!form.id"
                  :keyword="initData.keywordPat"
                  @change="onChangePat"
                  @clear="onClearPat"
                ></patientSearch>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="证件号：">
                <el-input :disabled="true" :value="patientInfo.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别：">
                <el-radio-group :disabled="true" :value="patientInfo.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="年龄：">
                <el-input :disabled="true" :value="patientInfo.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：">
                <el-input :disabled="true" :value="patientInfo.birthday"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号：">
                <el-input :disabled="true" :value="patientInfo.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="民族：">
                <el-input :disabled="true" :value="patientInfo.nationId|changeAssist(nationEnum)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="住址：">
                <el-input :disabled="true" :value="patientInfo|toAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="patientInfo.age>18">
              <el-form-item label="职业：">
                <el-input
                  :disabled="true"
                  :value="patientInfo.occupationId|changeAssist(occupationEnum)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="patientInfo.age>18">
              <el-form-item label="工作单位：">
                <el-input :disabled="true" :value="patientInfo.workUnit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="计划随访日期：" prop="scheduleVisitTime">
                <el-date-picker
                  v-model="form.scheduleVisitTime"
                  value-format="yyyy-MM-dd"
                  type="datetime"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="科室：" prop="deptId">
                <deptSearch v-model="form.deptId" @change="changeDept"></deptSearch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="主管医生：" prop="doctorId">
                <doctorSearch
                  v-model="form.doctorId"
                  :deptId="form.deptId"
                  :keyword="initData.doctorName"
                ></doctorSearch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划随访人员：" prop="scheduleVisitUserId">
                <userSearch
                  v-model="form.scheduleVisitUserId"
                  :keyword="initData.planUser"
                  placeholder
                ></userSearch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="重要信息备注：" prop="remark">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item label="随访类型：" prop="visitTypeId">
            <template v-for="(item,index) in visitType">
              <el-tag
                :type="form.visitTypeId==item.id?'primary':'info'"
                :key="index"
                style="margin:0 10px 10px 0;cursor: pointer;"
                @click="onClickType(item)"
              >{{item.name}}</el-tag>
            </template>
          </el-form-item>
          <el-form-item label="随访项目：" style="position: relative;" prop="visitProjectId">
            <el-select v-model="form.visitProjectId">
              <el-option
                v-for="items in visitProjectList"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="!form.status||form.status==1||form.status==2" label>
            <el-button
              type="primary"
              :loading="btnLoading"
              style="width:100px;"
              native-type="submit"
            >保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-left:20px">
        <div class="user-head">
          <img
            v-if="patientInfo.head"
            :src="patientInfo.head|imageUrl"
            style="width:230px;height:230px;"
          />
          <img v-else src="@/img/unknown-avatar.png" alt style="width:230px;height:230px;" />
        </div>
        <!-- <div style="margin-top:10px;">
          <el-button :disabled="!qxBtns.bl" style="width:100%" @click="openBL">查看病例</el-button>
        </div>-->
      </div>
    </div>
    <dialogHistoryCase v-model="dialogHistoryCase" :patientInfo="patientInfo"></dialogHistoryCase>
    <!-- <editVisitPeriod v-model="dialogReriod" @success="getReriod" :patientId="form.patientId" :visitTypeId="form.visitTypeId" :visitReriod="visitReriod"></editVisitPeriod> -->
  </section>
</template>
<script>
export default {
  components: {
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue"),
    deptSearch: () => import("@/pages/_com/deptSearch.vue"),
    userSearch: () => import("@/pages/_com/userSearch.vue"),
    patientSearch: () => import("@/pages/_com/patientSearch.vue"),
    // editVisitPeriod: () => import("./_com/editVisitPeriod.vue"),
    dialogHistoryCase: () =>
      import("@/pages/process/_com/dialogHistoryCase.vue"),
  },
  filters: {
    toAddress(obj) {
      let str = "";
      if (obj.province) str += obj.province;
      if (obj.city) str += obj.city;
      if (obj.district) str += obj.district;
      if (obj.address) str += obj.address;
      return str;
    },
    toResultStr(obj) {
      let str = "";
      if (!obj) return str;
      for (let key in obj) {
        if (str) {
          str += "," + obj[key];
        } else {
          str = obj[key];
        }
      }
      return str;
    },
  },
  data() {
    return {
      //   dialogReriod: false,
      dialogHistoryCase: false,
      qxBtns: {},
      btnLoading: false,
      //用户加载用户
      initData: {
        keywordPat: "",
        doctorName: "",
        planUser: "",
      },
      //内容模板
      visitContent: {
        name: "",
        item: null,
        pager: { pageSize: 10, pageNum: 1, total: 0 },
        list: [],
      },
      form: {
        deptId: "",
        doctorId: "",
        patientId: "",
        scheduleVisitTime: "",
        scheduleVisitUserId: "",
        visitTypeId: "",
        visitProjectId: "",
        id: "",
        //备注
        remark: "",
        // status: "",
      },
      rules: {
        patientId: [{ required: true, message: "此项必填", trigger: "change" }],
        scheduleVisitTime: [
          { required: true, message: "此项必填", trigger: "change" },
        ],
        deptId: [
          { required: true, message: "请选择随访科室", trigger: "change" },
        ],
        doctorId: [
          { required: true, message: "请选择随访医生", trigger: "change" },
        ],
        scheduleVisitUserId: [
          { required: true, message: "此项必填", trigger: "change" },
        ],
        visitTypeId: [
          { required: true, message: "此项必填", trigger: "change" },
        ],
        visitProjectId: [
          { required: true, message: "请选择随访项目", trigger: "change" },
        ],
      },
      visitProjectList: [], //随访项目列表
      visitType: [], //随访类型
      visitReriod: [], //随访周期
      occupationEnum: [], //职业
      nationEnum: [], //民族
      patientInfo: {}, //患者信息
    };
  },
  created() {
    this.form.id = this.jieMi(this.$route.query.id);
    this.initData.keywordPat = this.$route.query.patientName;
    this.initData.doctorName = this.$route.query.docName;
    this.initData.planUser = this.$route.query.planUser;
    // this.form.status = this.$route.query.status;
    this.onDetail();
    //获取所有随访类型
    this.getAllVisitTypeList();
    //获取所有随访项目
    this.getAllProjectList();
  },
  mounted() {},
  methods: {
    //提交
    onSubmit() {
      let j = {};
      this.$refs["form"].validate((v) => {
        if (v) {
          Object.assign(j, this.form);
          this.btnLoading = true;
          this.$api
            .addOrEditVisit(j)
            .then((res) => {
              if (res.executed) {
                this.$message.success("保存成功");
                this.$router.push({
                  path: "visit",
                });
              } else {
                this.$message.error(res.message);
              }
              this.btnLoading = false;
            })
            .catch((res) => {
              this.btnLoading = false;
            });
        }
      });
    },
    //获取详情
    async onDetail() {
      const { id } = this.form;
      if (id)
        await this.$api.getVisitRecordDetail({ id: id }).then((res) => {
          if (res.executed) {
            let d = res.dataBody;
            let json = {
              id: id,
              doctorId: d.doctorId,
              patientId: d.patientId,
              scheduleVisitTime: d.scheduleVisitTime,
              scheduleVisitUserId: d.scheduleVisitUserId,
              visitTypeId: d.visitTypeId,
              visitContent: d.visitContent,
              deptId: d.deptId,
              remark: d.remark,
              visitProjectId: d.visitProjectId,
            };
            this.$utils.joinFormJson(this.form, json);
            this.onChangePat();
          }
        });
    },
    //选择随访类型
    onClickType(obj) {
      this.form.visitTypeId = obj.id;
      this.form.visitProjectId = "";
      this.$refs["form"].validateField("visitTypeId");
      this.getAllProjectList();
    },
    //查询患者详情
    onChangePat() {
      const th = this;
      let j = {
        hpId: th.adminUser.hpId,
        patientId: th.form.patientId,
      };
      th.$api.getThePatientLibraryById(j).then((res) => {
        if (res.executed) {
          th.patientInfo = res.thePatientLibraryDetail;
        }
      });
    },
    //删除患者
    onClearPat() {
      this.patientInfo = {};
    },
    //打开病例
    openBL() {
      const th = this;
      if (!th.form.patientId) {
        th.$message.warning("请选择患者");
        return;
      }
      th.dialogHistoryCase = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 获取随访类型
     */
    getAllVisitTypeList() {
      this.$api.getVisitTypeList().then((res) => {
        if (res.executed) {
          this.visitType = res.dataBody;
        }
      });
    },
    /**
     * 获取随访项目
     */
    getAllProjectList() {
      this.$api
        .getAllProjectList({
          typeId: this.form.visitTypeId,
        })
        .then((res) => {
          if (res.executed) {
            this.visitProjectList = res.dataBody;
          }
        });
    },
    changeDept() {
      this.form.doctorId = "";
    },
  },
};
</script>